<template>
  <div class="workpoint">
    <van-tabs v-model="active" color="#FDC12C" :line-height="height" :line-width="width"
              @change="tabChange(active)" title-active-color="#FDC12C" swipeable :lazy-render="false">
      <van-tab v-for="(items,index) in tabs" :key="index" :title="items.title">
        <div class="line"></div>
        <div class="main" ref="workpointMain">
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"
                       @bottom-status-change="handleBottomChange" @top-status-change="handleTopChange"
                       :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="li" v-for="(item,index) in form" :key="index">
              <div class="left">
                <span>{{item.caption}}</span>
                <span>{{item.create_time}}</span>
              </div>
              <div class="right">
                <span>{{item.score}}</span>
              </div>
            </div>
            <div class="loadShow" v-show="allLoaded">暂无更多！</div>
            <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
              <span v-show="bottomStatus === 'loading'">加载中</span>
            </div>
          </mt-loadmore>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator, Loadmore} from 'mint-ui';
  import utils from '@/lib/StringExtend';

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        active: 0,
        height: 2,
        width: 160,
        tabs: [{title: '新增'}, {title: '扣减'}],
        wechatId: utils.getCookie('wechat_id'),
        form: [],
        topStatus: '',
        bottomStatus: '',
        allLoaded: false,
        page_count: 10,
        page_index: 1,
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
       * 上拉加载
       * */
      loadBottom() {
        this.page_index++;
        this.handleBottomChange("loading");//上拉时 改变状态码
        this.loadData();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.page_count = 10;
        this.page_index = 1;
        this.form = [];
        this.allLoaded = false;
        this.loadData();
      },
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId),
          page_count: this.page_count,
          page_index: this.page_index,
          type: this.active + 1,
        };
        Indicator.open('加载中...');
        this.$axios.userScoreFlowScoreDetail(params).then(res => {
          Indicator.close();
          this.$refs.loadmore[this.active].onTopLoaded();
          this.$refs.loadmore[this.active].onBottomLoaded();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          res.data.forEach(item => {
            this.form.push(item);
          });
          this.$nextTick(() => {
            if (this.page_index === 1)
              this.$refs.workpointMain[this.active].scrollTop = 0;
          });

          if (res.data.length < this.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
        })
      },
      tabChange() {
        this.page_count = 10;
        this.page_index = 1;
        this.form = [];
        this.allLoaded = false;
        this.loadData();
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .workpoint {
    width: 100%;
    height: 100%;
    background: white;

    .van-tabs__content, .van-tabs, .van-tabs--line {
      height: calc(100% - 44px - 0.12rem);
    }
  }

  .line {
    width: 100%;
    height: 0.12rem;
    background: #FAFAFA;
  }

  .main {
    width: 100%;
    padding-left: 0.42rem;
    box-sizing: border-box;
    position: absolute;
    top: calc(44px + 0.12rem);
    bottom: 0px;
    overflow: auto;

    .li {
      width: 100%;
      height: 1.1rem;
      border-bottom: 1px solid #F6F6F6;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        flex-direction: column;

        span:first-child {
          font-size: 0.3rem;
          color: #333333;
          margin-bottom: 0.1rem;
        }

        span:last-child {
          color: #999999;
          font-size: 0.24rem;
        }
      }

      .right {
        font-size: 0.24rem;
        margin-right: 0.29rem;
        color: #FDBD33;
      }
    }
  }

</style>
